<template>
    <div>

        <!--收件人信息-->
        <div>
            <el-form :label-position="labelPosition" label-width="150px" :model="formLabelAlign">
                <el-form-item label="收件人姓名">
                    <el-input v-model="formLabelAlign.name"></el-input>
                </el-form-item>
                <el-form-item label="收件人电话">
                    <el-input v-model="formLabelAlign.phone"></el-input>
                </el-form-item>
                <el-form-item label="收件人地址">
                    <el-input v-model="formLabelAlign.address"></el-input>
                </el-form-item>
                <el-form-item label="订单备注">
                    <el-input v-model="formLabelAlign.remark"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <!--商品列表-->
        <div>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="图片" width="120">
                    <template>
                        <img src="http://localhost:5164/20230921/cb9ef24b06634da9907b60231cd04021.png"
                            style="width:30px;" />
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="spec" label="规格" width="220"></el-table-column>
                <el-table-column prop="price" label="价格" width="120">
                    <template slot-scope="scope">
                        <span style="color:red;">￥{{ scope.row.price.toFixed(2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="stock" label="库存" width="120"></el-table-column>
                <el-table-column prop="saleNumber" label="购买数量" width="150">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.number" size="mini" :min="1" :max="10"
                            label="描述文字"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="saleNumber" label="小计" width="150">
                    <template slot-scope="scope">
                        <span style="color:red;">￥{{ (scope.row.number * scope.row.price).toFixed(2) }}</span>

                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align:right;padding-right:50px;">
                <div>
                    共选中{{ selectedCount }}个商品，总金额：￥<span style="color:red;">{{ selectedAmount }}</span>元
                </div>
                <el-button type="danger" @click="eventSubmitOrder">提交订单</el-button>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            labelPosition: 'right',
            formLabelAlign: {
                name: '',
                phone:'',
                address:'',
                remark:''
            },
            multipleSelection: [],
            tableData: [
                { skuId: '0F3635BC-DDB3-4B5F-B978-B1C7FEDDC882', number: 1, name: '苹果15 pro', spec: '{"颜色":"银色","内存":"1TB"}', price: 9999.00, stock: 10000, saleNumber: 9999, flag: '11000000' },
                { skuId: '621F2847-5A6F-4A43-95A9-5BBEE0076CF1', number: 1, name: '苹果15 pro', spec: '{"颜色":"银色","内存":"512G"}', price: 8999.00, stock: 10000, saleNumber: 9999, flag: '11000000' },
                { skuId: '74A2ADD9-D6A0-4877-8CB7-EE4C1AE6A776', number: 1, name: '苹果15 pro', spec: '{"颜色":"银色","内存":"256G"}', price: 7999.00, stock: 10000, saleNumber: 9999, flag: '11010000' },

            ]
        };
    },
    methods: {

        //提交订单按钮事件
        eventSubmitOrder() {

            if(this.multipleSelection.length<=0){
                this.$message.error('请至少选择一个商品')
                return
            }

            let url = 'http://localhost:5164/order'
            let data = {
                "master": {
                    "memberId": "3fa85f64-5717-4562-b3fc-2c963f66afa6", //会员id --暂时不改
                    "recivedName": this.formLabelAlign.name, //收件人姓名
                    "recivedPhone": this.formLabelAlign.phone, //收件人电话
                    "recivedAddress": this.formLabelAlign.address,//地址
                    "orderAmount": this.selectedAmount, //订单总金额
                    "rateAmount": 0, //折扣 0  -- 暂时没有
                    "remark": this.formLabelAlign.remark //订单描述
                },
                "details": []
            }
            data.details = this.multipleSelection
            //console.log(url,data);
            this.$http.post(url, data).then(res => {
                this.$message.info(res.data.message)
                if (res.data.code == 200) {
                    //跳转到列表
                }
            })
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    },
    //计算属性
    computed: {
        //选中的数量
        selectedCount() {
            return this.multipleSelection.length
        },
        //选中的总金额
        selectedAmount() {
            let s = 0
            this.multipleSelection.forEach(x => {
                s += x.number * x.price
            })
            return s
        }
    }
}
</script>